.stripe__connect-account {
	.stripe__connect-account-heading {
		font-size: $font-body-small;
		font-weight: 600;
		margin-bottom: 8px;
	}

	.stripe__connect-account-body {
		background: var( --color-neutral-0 );
		display: flex;
		margin-bottom: 16px;
		padding: 12px;

		.stripe__connect-account-logo-container {
			align-items: center;
			background: var( --color-surface );
			border: 1px solid var( --color-neutral-10 );
			display: flex;
			height: 46px;
			justify-content: center;
			margin-right: 12px;
			width: 46px;

			.stripe__connect-account-logo {
				max-height: 36px;
				max-width: 36px;
			}
		}

		.stripe__connect-account-details {
			display: flex;
			flex-direction: column;

			.stripe__connect-account-name {
				font-size: $font-body-small;
				font-weight: 400;
				margin-bottom: 1px;
				margin-right: 4px;
			}

			.stripe__connect-account-email {
				color: var( --color-text-subtle );
			}

			.stripe__connect-account-status {
				border-radius: 2px;
				color: var( --color-text-inverted );
				font-size: $font-body-extra-small;
				margin-right: 8px;
				padding: 3px 8px;

				&.account-activated {
					background-color: var( --color-success );
				}

				&.account-not-activated {
					background-color: var( --color-warning );
				}
			}

			.stripe__connect-account-disconnect {
				font-size: $font-body-extra-small;
				padding-top: 3px;
				padding-bottom: 0;
			}
		}
	}
}

.stripe__connect-prompt {
	ul {
		margin-bottom: 16px;
	}
	.form-fieldset {
		margin-left: 40px;
	}
}

.stripe__method-edit-header {
	font-size: $font-title-small;
	justify-content: space-between;
	padding: 0 0 16px;
	font-weight: 600;

	&.placeholder {
		margin-bottom: 16px;
		width: 30%;
		@include placeholder();
	}
}

.stripe__method-edit-body {
	padding: 0 0 16px;

	&.placeholder {
		height: 60px;
		@include placeholder();
	}
}
